<template>
	<div class="home-box" ref="homeBox">

		<!--  echarts -->
		<div class="echarts" ref="echarts"></div> 
		
	</div>
</template>

<script>
	// selfs / sons
	import * as echarts from "echarts";
	export default {
		components: {
			
		},
		data() {
			return {
				like: true,
				value1: 66.88,
				newPersons: 1314,
				title: "增长人数",
				echarts: {},
				linehartOptions: {
				  title: {
				    text: "图表统计",
				    left: 20,
				  },
				  tooltip: {
				    trigger: "axis",
				  },
				  legend: {
				    data: ["订单", "销售额", "注册人数", "管理员人数"],
				  },
				  grid: {
				    left: "3%",
				    right: "4%",
				    bottom: "3%",
				    containLabel: true,
				  },
				
				  xAxis: {
				    type: "category",
				    boundaryGap: false,
				    data: [
				      "2024/1/10",
				      "2024/1/11",
				      "2024/1/12",
				      "2024/1/13",
				      "2024/1/14",
				      "2024/1/15",
				      "2024/1/16",
				    ],
				  },
				  yAxis: {
				    type: "value",
				  },
				  series: [
				    {
				      name: "管理员人数",
				      type: "line",
				      stack: "Total",
				      data: [520, 132, 101, 134, 90, 230, 210],
				    },
				    {
				      name: "销售额",
				      type: "line",
				      stack: "Total",
				      data: [220, 182, 191, 234, 290, 330, 310],
				    },
				    {
				      name: "注册人数",
				      type: "line",
				      stack: "Total",
				      data: [150, 232, 201, 154, 190, 330, 410],
				    },
				    {
				      name: "订单",
				      type: "line",
				      stack: "Total",
				      data: [320, 332, 301, 334, 390, 330, 320],
				    },
				  ],
				 },
			};
		},
		methods: {
			// 窗口大小事件
			resizeListener() {
			  this.echarts.resize();
			},
		},
		mounted() {
		  //监听窗口改变，重置图表大小
		  window.addEventListener("resize", this.resizeListener);
		
		  // 基于准备好的dom，初始化echarts实例
		  this.echarts = echarts.init(this.$refs.echarts);
		  // 绘制图表
		  this.echarts.setOption(this.linehartOptions);
		},
		beforeDestroy() {
		
		},
	};
</script>

<style lang="less" scoped>
	.home-box {
		background-color: #fff;
		width: 100%;
		height: 100%;
		overflow: auto;
		display: flex;
		flex-direction: column;

		// eachrts盒子

	}
</style>